<template>
  <Card title="Message Base Frame List" icon="md-list-box" :padding="0" shadow style="width: 100%;">
    <ButtonGroup slot="extra">
      <Button icon="md-create" size="small" @click="newMdf()">新建</Button>
      <Upload :before-upload="openMdf" action style="position: relative;float: left">
        <Button icon="md-open" size="small">打开</Button>
      </Upload>
      <Upload :before-upload="importMdf" action style="position: relative;float: left">
        <Button icon="md-download" size="small">关联</Button>
      </Upload>
    </ButtonGroup>
      <Table
        border
        :columns="columns"
        :data="messList"
        size="small"
        :height="getButtomHeight"
        ref="uartCfgTable"
      >
        <template slot-scope="{ row, index }" slot="action">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="messEditer(index)"
          >编辑</Button>
          <Button type="error" size="small" @click="dissociate(index)">取关</Button>
        </template>
      </Table>
  </Card>
</template>

<script>
import ExportMdf from "../../../../utils/export-mdf";
import Mdf from "../../../../utils/mdf";
export default {
  components: {},
  computed: {
    getButtomHeight: function () {
      return this.$store.getters.getBottomHeight - 36 - 51;
    },
  },
  data() {
    return {
      messageBaseDiag: false,
      fileObj: null,
      columns: [
        {
          title: "Message Name",
          key: "name",
        },
        {
          title: "Action",
          slot: "action",
          width: 225,
          align: "center",
        },
      ],
      messList: [
        {
          name: "dssjsjjs",
        },
      ],
    };
  },
  methods: {
    exportMDF(params) {
      if (params.filename) {
        if (params.filename.indexOf(".mdf") === -1) {
          params.filename += ".mdf";
        }
      } else {
        params.filename = "messageBase.mdf";
      }

      const data = Mdf(params);
      if (params.callback) params.callback(data);
      else ExportMdf.download(params.filename, data);
    },
    createMDF(params) {
      if (params.filename) {
        if (params.filename.indexOf(".mdf") === -1) {
          params.filename += ".mdf";
        }
      } else {
        params.filename = "messageBase.mdf";
      }
      ExportMdf.download(params.filename, "");
    },

    newMdf() {
      this.fileObj = null;
      this.messageBaseDiag = true;
      // console.log("sjsjsjsj");
      // this.createMDF({
      // });
      // this.exportMDF({
      // })
    },
    openMdf(file) {
      this.fileObj = file;
      this.messageBaseDiag = true;
      return false;
    },
    importMdf(file) {
      this.messList.push({ name: file.path });

      return false;
    },
    messEditer(index) {
      this.path = this.messList[index].name;
      this.messageBaseDiag = true;
    },
    dissociate() {
      //  this.messList.push({name:file.path})
    },
  },
};
</script>

<style>
</style>